<!--
 * @Author: 菅书繎 2032642089@qq.com
 * @Date: 2025-09-11 08:40:46
 * @LastEditors: 菅书繎 2032642089@qq.com
 * @LastEditTime: 2025-09-17 17:03:03
 * @FilePath: \大三上 前端\city\src\pages\components\Bottom2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- html代码 -->
        <!-- From Uiverse.io by anand_4957 -->
        <div class="loader">
            <span><span></span><span></span><span></span><span></span></span>
            <div class="base">
                <span></span>
                <div class="face"></div>
            </div>
        </div>
        <div class="longfazers">
            <span></span><span></span><span></span><span></span>
        </div>

        <Title :title="title"></Title>
        {{ed}}
        <div class="box" style="width:404px ;height:100%;">
            <div ref="bottom2" style="height: 75px;width:60px;margin-top:10px"></div>
            <img width="300px" height="200px" src="../../../../音视频/838ca24fa3364bfda60a4b9de5bf16b3.gif" alt="图片加载失败">

        </div>
    </div>
</template>
<script>
import Title from './Title.vue';
import { get } from '@/utils/request';
import moment from 'moment';
import { mapState } from 'vuex';
import { Scatter } from '@antv/g2plot';
import { Column } from '@antv/g2plot';
export default{
    data(){
        return{
            title:'噪音',
            twoData:[],
            params: {
                page: 1,
                pageSize: 100,
                //engineer_id: '',  // 添加默认值
                //device_id: ''     // 添加默认值
            },
            columnPlot:null 
        }
    },
    computed: {
        ...mapState(['ed'])
    },
    //侦听器 侦听数据
    watch: {
        ed: {
            handler(n, o) {
                //根据设备信息重新查询数据，重新渲染图表
                this.params.engineer_id = n.engineer_id;
                this.params.device_id = n.device_id;
                this.getEmpData();
                //根据最新获取的数据重新渲染图表
                this.columnPlot.changeData(this.twoData);
            },

            //深度监听
            deep: true
        }
    },
    methods:{
        twoPhoto(){
            this.columnPlot = new Column(this.$refs.bottom2, {
                data:this.twoData,
                xField: 'insert_time',
                yField: 'noise',
                label: {
                    // 可手动配置 label 数据标签位置
                    position: 'middle', // 'top', 'bottom', 'middle',
                    // 配置样式
                    style: {
                        fill: 'white',
                        opacity: 0.6,
                    },
                },
                xAxis: {
                    label: {
                        autoHide: true,
                        autoRotate: false,
                    },
                },
                meta: {
                    type: {
                        alias: '类别',
                    },
                    sales: {
                        alias: '销售额',
                    },
                },
            });

            this.columnPlot.render();

        },
         async getEmpData() {
             let res = await get('/dashboard/pageQueryTodayData', this.params);
            console.log(res, 'bottom2');
             let temp = [];
             //将后端获取的数据设置给tempData
             res.data.list.forEach((item, index, arr) => {
                 //由于刻度混乱 将第一条数据设置为15.4
                 //item表示数组每一项
                 item.insert_time = moment(item.insert_time).format("HH:mm");
                 //由于查询数据密度密集 需要将数据处理 每隔10条数据取一条数据
                 if (index % 100 == 0) {
                     temp.push(arr[index])
                 }
             });
             this.twoData=temp;
        }

    },
    async mounted(){
        await this.getEmpData();
        this.twoPhoto();

    }

    

}
    
</script>
<style lang="less" scoped>
// .container{
//     background-color: #000;
//     min-height: 100vh;
//     color: white;
// }
 .box{
    display: flex;

 }
 .loader {
     position: absolute;
     top: 50%;
     margin-left: -50px;
     left: 50%;
     animation: speeder 0.4s linear infinite;
 }

 .loader>span {
     height: 5px;
     width: 35px;
     background: #000;
     position: absolute;
     top: -19px;
     left: 60px;
     border-radius: 2px 10px 1px 0;
 }

 .base span {
     position: absolute;
     width: 0;
     height: 0;
     border-top: 6px solid transparent;
     border-right: 100px solid #000;
     border-bottom: 6px solid transparent;
 }

 .base span:before {
     content: "";
     height: 22px;
     width: 22px;
     border-radius: 50%;
     background: #000;
     position: absolute;
     right: -110px;
     top: -16px;
 }

 .base span:after {
     content: "";
     position: absolute;
     width: 0;
     height: 0;
     border-top: 0 solid transparent;
     border-right: 55px solid #000;
     border-bottom: 16px solid transparent;
     top: -16px;
     right: -98px;
 }

 .face {
     position: absolute;
     height: 12px;
     width: 20px;
     background: #000;
     border-radius: 20px 20px 0 0;
     transform: rotate(-40deg);
     right: -125px;
     top: -15px;
 }

 .face:after {
     content: "";
     height: 12px;
     width: 12px;
     background: #000;
     right: 4px;
     top: 7px;
     position: absolute;
     transform: rotate(40deg);
     transform-origin: 50% 50%;
     border-radius: 0 0 0 2px;
 }

 .loader>span>span:nth-child(1),
 .loader>span>span:nth-child(2),
 .loader>span>span:nth-child(3),
 .loader>span>span:nth-child(4) {
     width: 30px;
     height: 1px;
     background: #000;
     position: absolute;
     animation: fazer1 0.2s linear infinite;
 }

 .loader>span>span:nth-child(2) {
     top: 3px;
     animation: fazer2 0.4s linear infinite;
 }

 .loader>span>span:nth-child(3) {
     top: 1px;
     animation: fazer3 0.4s linear infinite;
     animation-delay: -1s;
 }

 .loader>span>span:nth-child(4) {
     top: 4px;
     animation: fazer4 1s linear infinite;
     animation-delay: -1s;
 }

 @keyframes fazer1 {
     0% {
         left: 0;
     }

     100% {
         left: -80px;
         opacity: 0;
     }
 }

 @keyframes fazer2 {
     0% {
         left: 0;
     }

     100% {
         left: -100px;
         opacity: 0;
     }
 }

 @keyframes fazer3 {
     0% {
         left: 0;
     }

     100% {
         left: -50px;
         opacity: 0;
     }
 }

 @keyframes fazer4 {
     0% {
         left: 0;
     }

     100% {
         left: -150px;
         opacity: 0;
     }
 }

 @keyframes speeder {
     0% {
         transform: translate(2px, 1px) rotate(0deg);
     }

     10% {
         transform: translate(-1px, -3px) rotate(-1deg);
     }

     20% {
         transform: translate(-2px, 0px) rotate(1deg);
     }

     30% {
         transform: translate(1px, 2px) rotate(0deg);
     }

     40% {
         transform: translate(1px, -1px) rotate(1deg);
     }

     50% {
         transform: translate(-1px, 3px) rotate(-1deg);
     }

     60% {
         transform: translate(-1px, 1px) rotate(0deg);
     }

     70% {
         transform: translate(3px, 1px) rotate(-1deg);
     }

     80% {
         transform: translate(-2px, -1px) rotate(1deg);
     }

     90% {
         transform: translate(2px, 1px) rotate(0deg);
     }

     100% {
         transform: translate(1px, -2px) rotate(-1deg);
     }
 }

 .longfazers {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .longfazers span {
     position: absolute;
     height: 2px;
     width: 20%;
     background: #000;
 }

 .longfazers span:nth-child(1) {
     top: 20%;
     animation: lf 0.6s linear infinite;
     animation-delay: -5s;
 }

 .longfazers span:nth-child(2) {
     top: 40%;
     animation: lf2 0.8s linear infinite;
     animation-delay: -1s;
 }

 .longfazers span:nth-child(3) {
     top: 60%;
     animation: lf3 0.6s linear infinite;
 }

 .longfazers span:nth-child(4) {
     top: 80%;
     animation: lf4 0.5s linear infinite;
     animation-delay: -3s;
 }

 @keyframes lf {
     0% {
         left: 200%;
     }

     100% {
         left: -200%;
         opacity: 0;
     }
 }

 @keyframes lf2 {
     0% {
         left: 200%;
     }

     100% {
         left: -200%;
         opacity: 0;
     }
 }

 @keyframes lf3 {
     0% {
         left: 200%;
     }

     100% {
         left: -100%;
         opacity: 0;
     }
 }

 @keyframes lf4 {
     0% {
         left: 200%;
     }

     100% {
         left: -100%;
         opacity: 0;
     }
 }
    
</style>